<template>
	<view style="background-color: #FFFFFF;margin-bottom: 100px;">
		<!-- /朋友圈著内容 -->
		<view v-if="faxian.length==0" style="text-align: center;color: #DBDBDB;">
			<text>暂无朋友圈信息......</text>
		</view>
		<view class="" v-for="(item,index) in faxian" style="border-bottom: 0.5px solid #FAFAFA;">
			<view class="quan">
				<view class="wrap" @tap="friendinfo(item)">
					<image :src="item.avatar" mode=""></image>
				</view>
				<view class="rightwrap">
					<text style="font-size: 15px;color: #000000;">{{item.nickname}}</text>
					<view class="" style="color: rgba(16, 16, 16, 1);
										font-size: 14px;
										text-align: left;
										font-family: PingFangSC-regular;margin-top: 5px;">
						{{item.content}}
					</view>
					<!-- yizhang  -->
					<view v-show="item.newimg.length==1">
						<view class="imgwrapone" style="text-align: left;">
							<image :src="item.img" style="width: 130px;margin-left: 5px;height: 205px;"  v-if="item.img!=''"></image>
						</view>
					</view>
					

					<!-- sanzhang  -->
					<view class="imgwrap" style="" v-show="item.newimg.length>1">
						<view v-for="(imgitem,index) in item.newimg">
							<image :src="imgitem" style="width: 100px;height: 105px;"></image>
						</view>
					</view>

					
					<view class="videos" style="text-align: left;" v-show="item.vedio != ''">
						<!-- 视频 -->
					
						<video :src="item.vedio" controls="controls" x5-playsinline="" playsinline="true"
						 webkit-playsinline="true" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen=""
						 x5-video-orientation="portraint" style="width: 200px;margin-top: 10px;margin-left: 5px;
						height: 105px;"></video>
					</view>
					
					
					
<!-- 					<view class="videos" style="text-align: left;" v-show="item.vedio != ''">

						<video v-if="item.is_have_sf != 1" :src="item.vedio" controls="controls" x5-playsinline="" playsinline="true"
						 webkit-playsinline="true" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen=""
						 x5-video-orientation="portraint" style="width: 200px;margin-top: 10px;margin-left: 5px;
						height: 105px;"></video>

						<view v-else class="" @tap="toOpen('one','one','two',item.id,item.money)" style="background-color: #FAFAFA;width: 200px;margin-top: 10px;margin-left: 5px;height: 105px;display: flex;justify-content: center;align-items: center;">
							<text style="font-size: 16px;">该视频需要收费</text>
						</view>
					</view> -->
					
				</view>
			</view>
			<view class="bottominfo">
				<text style="color: rgba(16, 16, 16, 1);
					font-size: 12px;
					text-align: left;
					font-family: PingFangSC-regular;">{{item.add_time}}</text>
				<view class="twoflex">
					<view class="twodisplay">
						<view class="thispinglun" @click="openxiaoxi(item.dy_id)">
							<image src="../../static/img/pinglun.png" mode="" style="width: 20px;height: 20px;margin-right: 2px;"></image>
							<text style="
								font-size: 10px;
								font-family: PingFangSC-regular;margin-right: 20px;">{{item.pl_num}}</text>
						</view>
						<view class="" @click="dz(item.dy_id)" style="width: 35px;display: flex;align-items: center;">
							<image src="../../static/love.png" v-if="item.is_dz == 1" mode="" style="width: 20px;height: 20px;margin-right: 2px;"></image>
							<image src="../../static/img/pinglun.png" v-else mode="" style="width: 20px;height: 20px;margin-right: 2px;"></image>
							<text style="
								font-size: 10px;
								font-family: PingFangSC-regular;">{{item.zan_num}}</text>
						</view>

					</view>
				</view>
			</view>
		</view>


<wyb-popup ref="wf_status3" type="bottom" width="500" radius="6" >
		<!-- 底部弹出消息 -->
		<view class="mask" >
			<view class="title">
				<view>{{number}}条评论</view>
				<image src="/static/gb.png" @tap="guanbi"></image>
			</view>
			<scroll-view scroll-y="true" style="height: 75% !important;">
				<view v-for="(item,index) in list">
					<!-- 评论 -->
					<view style="margin: 10upx 0; display: flex;align-items: center;justify-content: space-between;">
						<!-- 信息 -->
						<view class="thisOne">
							<image class="useravatar" :src="item.avatar"></image>
							<view>
								<view class="username">{{item.nickname}}</view>
								<view class="pinglun">{{item.title}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view style="display: flex;align-items: center;justify-content: space-between;margin-top: 4%;">
				<!-- 信息 -->
				<view style="">
					<input v-model="title" type="text" placeholder="评论....." style="height: 30px;border: 1px solid #CCCCCC;width:250px;border-radius: 40px;padding-left: 10px;">
				</view>
				<!-- 赞 -->
				<view class="zan">
					<button type="default" style="height: 32px;width: 80px;background-color: #FFFFFF;margin-left: 10px;font-size: 14px;line-height: 30px;"
					 @click="toadd">确定</button>
				</view>
			</view>
		</view>

</wyb-popup>
		<!-- <view class="zwyHeightSec but" >经典样式三马上去支付</view> -->
		<jpPwd ref="jpPwds" @completed="completed" @inputPwd="inputPwd" @forget="forget" :payType="pwd.payType" :keyType="pwd.keyType"
		 :pawType="pwd.pawType" :tite="pwd.tite" :contents="pwd.contents" :cancelType="pwd.cancelType" :keep="pwd.keep" :msg="pwd.msg" :places="pwd.places"></jpPwd>
		 <view :class="isIPX?'chatRoom_tab_X':'chatRoom_tab'">
		 	<view class="tableBar" @tap="tab_chat">
		 		<view v-if="unReadSpotNum > 0" :class="'em-unread-spot ' + (unReadSpotNum == '99+'?'em-unread-spot-litleFont':'')">{{ unReadSpotNum }}</view>
		 		<image :class="unReadSpotNum > 0 ? 'haveSpot': ''" src="/static/bottom/xiaoxi.png"></image>
		 		<text style="font-size: 13px;">聊天</text>
		 	</view>
		 
		 	<view class="tableBar" @tap="tab_contact">
		 		<view v-if="unReadTotalNotNum > 0" class="em-unread-spot">{{ unReadTotalNotNum }}</view>
		 		<image :class="unReadTotalNotNum > 0 ? 'haveSpot': ''" src="/static/bottom/tongxunlu.png"></image>
		 		<text style="font-size: 13px;">通讯录</text>
		 	</view>
		 
		 	<view class="tableBar">
		 		<!-- <view v-if="unReadTotalNotNum > 0 || unReadSpotNum == '99+'" class="em-unread-spot"></view> -->
		 		<image :class="unReadTotalNotNum > 0 || unReadSpotNum == '99+'? 'haveSpot': ''" src="/static/bottom/faxianred.png"></image>
		 		<text class="activeText" style="font-size: 13px;">发现</text>
		 	</view>
		 	
		 	<view class="tableBar" @tap="tab_setting">
		 		<image src="/static/bottom/my.png"></image>
		 		<text style="font-size: 13px;">我的</text>
		 	</view>
		 </view>
	</view>
</template>

<script>
	let disp = require("../../utils/broadcast");
	import jpPwd from '@/components/jp-pwd/jp-pwd.vue';
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
			jpPwd,wybPopup
		},
		data() {
			return {
				hidd:true,
				messageNum: 0,
				unReadSpotNum: 0,
				groupInviteNum: 0,
				unReadTotalNotNum: 0,
				isIPX: false,
				pwd: {
					payType: 'one', //支付样式  one two
					keyType: 'one', //键盘样式  one two
					pawType: 'one', //输入框样式  one two
					tite: '请输入支付密码', //标题
					contents: '', //提示
					cancelType: false, //是否输入完密码后消失
					keep: false, //点击遮挡是否关闭
					msg: '', // 密码错误提示语
					places: 6
				},
				isshow: false,
				userinfo: {
					nickname: '',
					img: "",
					phone: ''
				},
				clicklove: false,
				love: {
					num: 1,
					"morenimg": "/static/img/dianzan.png",
					"img": "/static/love.png"
				},
				listshow: false,
				istan: false,
				faxian: [],
				token: '',
				title: '',
				list: '',
				dzmsg: '',
				zhifu: 0,
				dy_id: ''
			}
		},
		onNavigationBarButtonTap(e) {
			if(e.float=='right'){
				uni.navigateTo({
					url:'/pages/fabu/fabu'
				})
			}
			if (this.isshow == false) {
				this.isshow = true
			} else {
				this.isshow = false
			}
		},
		computed: {
			number() {
				return this.list.length
			}
		},
		onShow() {
			this.setData({
			  messageNum: getApp().globalData.saveFriendList.length,
			  unReadSpotNum: getApp().globalData.unReadMessageNum > 99 ? '99+' : getApp().globalData.unReadMessageNum,
			  groupInviteNum: getApp().globalData.saveGroupInvitedList.length,
			  unReadTotalNotNum: getApp().globalData.saveFriendList.length + getApp().globalData.saveGroupInvitedList.length
			});
			
			if (getApp().globalData.isIPX) {
			  this.setData({
			    isIPX: true
			  });
			}
		},
		onLoad() {
			let me = this; //监听加好友申请
			disp.on("em.subscribe", function () {
			  me.setData({
			    messageNum: getApp().globalData.saveFriendList.length,
			    unReadTotalNotNum: getApp().globalData.saveFriendList.length + getApp().globalData.saveGroupInvitedList.length
			  });
			}); //监听未读消息数
			
			disp.on("em.unreadspot", function () {
			  me.setData({
			    unReadSpotNum: getApp().globalData.unReadMessageNum
			  });
			}); //监听加群通知数
			
			disp.on("em.invite.joingroup", function () {
			  me.setData({
			    groupInviteNum: getApp().globalData.saveGroupInvitedList.length,
			    unReadTotalNotNum: getApp().globalData.saveFriendList.length + getApp().globalData.saveGroupInvitedList.length
			  });
			});
			uni.setStorageSync("friendNotiData", getApp().globalData.saveFriendList);
			uni.setStorageSync("groupNotiData", getApp().globalData.saveGroupInvitedList);
			me.token = uni.getStorageSync("token")
			uni.request({
				url: me.G_base + '/api/userinfo',
				method: "GET",
				header: {
					'content-type': 'application/x-www-form-urlencoded',
					'Authori-zation': 'Bearer ' + me.token
				},
				success: (res) => {
					console.log(res)
					console.log(res.data.url);
					me.userinfo.img = res.data.data.avatar
					me.userinfo.nickname = res.data.data.nickname
					me.userinfo.phone = res.data.data.phone

				},
				fail: (err) => {
					console.log(err)
				}
			});

			me.getdz()
		},
		onPageScroll() {
			this.$refs.wf_status3.close()
			this.istan = false
			this.hidd = true
			this.isshow = false
		},
		
		methods: {
			into_friendNot: function () {
			  uni.navigateTo({
			    url: "../notification_friendDetail/friendDetail?myName=" + uni.getStorageSync("myUsername")
			  });
			},
			into_groupNot: function () {
			  uni.navigateTo({
			    url: "../notification_groupDetail/groupDetail?myName=" + uni.getStorageSync("myUsername")
			  });
			},
			tab_contact: function () {
			  uni.redirectTo({
			    url: "../main/main?myName=" + uni.getStorageSync("myUsername")
			  });
			},
			tab_chat: function () {
			  uni.redirectTo({
			    url: "../chat/chat"
			  });
			},
			tab_setting: function () {
			  uni.redirectTo({
			    url: "../setting/setting"
			  });
			},
			toOpen(payType, keyType, pawType, id,money) {
				console.log(money)
				this.dy_id = id
				this.pwd.payType = payType
				this.pwd.keyType = keyType
				this.pwd.pawType = pawType
				this.pwd.contents = '需要支付'+money+'元'
				this.pwd.places = 6
				this.$refs.jpPwds.toOpen()
				this.hidd= false
			},
			completed(e) {
				// console.log(e)
				// console.log(this)
				let that = this
				uni.request({
					url: this.G_base + '/api/lz/zfpas',
					data: {
						pas: e
					},
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + this.token
					},
					success: (res) => {
						console.log(res)
						if (res.data.status == 200) {
							uni.request({
								url: this.G_base + '/api/user/vedio_charge',
								data: {
									dy_id: this.dy_id
								},
								method: "POST",
								header: {
									'content-type': 'application/x-www-form-urlencoded',
									'Authori-zation': 'Bearer ' + this.token
								},
								success: (res) => {
									console.log(res)
									if (res.data.status == 200) {
										uni.showToast({
												title: res.data.msg,
												icon: 'none'
											}),
											this.getdz()
										this.$refs.jpPwds.toCancel()
										this.hidd = true
									} else {
										uni.showToast({
												title: res.data.msg,
												icon: 'none'
											}),
											that.$refs.jpPwds.backs()
									}
								},
								fail: (err) => {
									console.log(err)
								}
							});

						} else {
							that.pwd.msg = '密码错误'
							that.$refs.jpPwds.backs()
						}
					},
					fail: (err) => {
						console.log(err)

					}
				});
			},
			inputPwd(e) {
				console.log(e)
				this.pwd.msg = ''
			},
			forget() {
				uni.navigateTo({
					url: '/pages/xiugaimima/zhifumima'
				})
			},
			dz(id) {
				console.log(id)
				uni.request({
					url: this.G_base + '/api/lz/dz',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + this.token
					},
					data: {
						id: id,
					},
					success: res => {
						if (res.data.status == 200) {
							if (res.data.msg == '点赞成功') {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
								this.dzmsg = res.data.msg
								this.getdz()
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
								this.dzmsg = res.data.msg
								this.getdz()
							}
						}
					}
				})
			},
			toadd() {
				uni.request({
					url: this.G_base + '/api/user/add_comment',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + this.token
					},
					data: {
						dy_id: this.dy_id,
						title: this.title,

					},
					success: res => {
						if (res.data.status == 200) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							this.title = ''
							this.getpl()
						}
					}
				})
			},
			getpl() {
				console.log(this.dy_id)
				uni.request({
					url: this.G_base + '/api/lz/pllist',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + this.token
					},
					data: {
						id: this.dy_id
					},
					success: res => {
						this.list = res.data.data
					}
				})
			},
			gochuangjiang() {
				uni.navigateTo({
					url: '/pages/qunyuan/qunyuan'
				})
				this.isshow = false
			},
			guanbi() {
				this.$refs.wf_status3.close()
				// console.log('jsncxdkjs')
				this.istan = false
				this.hidd = true
			},
			containerTap() {
				this.listshow = false
			},
			zhankai() {
				this.listshow = true
			},
			saoyisao() {
				uni.scanCode({
				    success: function (res) {
						uni.navigateTo({
							url:"/pages/friendinfo/friend?account="+res.result
						})
				    }
				});

			},
			add() {
				uni.navigateTo({
					url: '/pages/add_contact/add_contact'
				})
				this.isshow = false
			},
			help() {
				uni.navigateTo({
					url: '/pages/help/help'
				})
			},
			changeimg() {
				let token = uni.getStorageSync("token")
				uni.chooseImage({
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: this.G_base + '/api/upload/image',
							filePath: res.tempFilePaths[0],
							name: 'file',
							method: 'post',
							header: {
								'Authori-zation': 'Bearer ' + token
							},
							success: e => {
								console.log(e)
								let data = e.data;
								let s = JSON.parse(data);
								this.userinfo.img = s.data.url
								uni.showToast({
									title: s.msg,
									icon: 'none'
								})

								// 修改信息
								// if(e.status==200){
								uni.request({
									url: this.G_base + '/api/user/edit',
									method: 'POST',
									header: {
										'Authori-zation': 'Bearer ' + token
									},
									data: {
										avatar: this.userinfo.img
									},
									success: res => {
										console.log(res)
									}
								})
								// }
							},
							fail(e) {
								console.log(e)
							}
						});
					}
				});
			},
			goback() {
				uni.navigateBack({
					delta: 1
				})
			},
			openxiaoxi(dy_id) {
				this.$refs.wf_status3.show()
				// console.log(dy_id)
				this.dy_id = dy_id
				if (this.istan == false) {
					
					this.istan = true
					this.hidd = false
					// console.log(this.hidd)
					this.getpl()

				} else {
					this.istan = false
					this.hidd = true
				}

			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.bottprop.close()
			},
			getdz() {
				this.token = uni.getStorageSync("token")
				uni.request({
					url: this.G_base + '/api/user/list_fxdt',
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + this.token
					},
					success: (res) => {
						console.log(res)
						res.data.data.forEach(item => {
							if(item.img == ''){
								item['newimg'] = ''
								console.log(item['newimg'].length)
							}else{
								item['newimg'] = item['img'].split(",")
								console.log(item['newimg'].length)
							}
							
						})
						console.log(res.data.data)
						this.faxian = res.data.data
					},
				});
			},
			listclick(data) {
				console.log(data)
				if (data.title == "我的二维码") {
					uni.navigateTo({
						url: "../mycode/mycode"
					})
				} else if (data.title == "我的收益") {
					uni.navigateTo({
						url: "../Income/Income"
					})
				} else if (data.title == "我的钱包") {
					uni.navigateTo({
						url: "../money/money"
					})
				} else if (data.title == "我的银行卡") {
					uni.navigateTo({
						url: "../../tixian/yinhangka/yinhangka"
					})
				} else if (data.title == "设置") {
					uni.navigateTo({
						url: "../../shezhi/home/home"
					})
				} else if (data.title == "账号切换") {
					uni.navigateTo({
						url: "../../qie_login/qie_login"
					})
				} else if (data.title == "安全退出") {
					uni.navigateTo({
						url: "../../login/login"
					})
				}
			},
			gofabu() {
				uni.navigateTo({
					url: "../../fabu/fabu"
				})
			},
			tuichu() {
				let token = uni.getStorageSync("token")
				uni.request({
					url: this.G_base + '/api/logout',
					method: "GET",
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation': 'Bearer ' + token
					},
					success: (res) => {
						console.log(res);
						if (res.data.status == 200) {
							this.$refs.popup.close()
							uni.reLaunch({
								url: "../../login/login"
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								image: '../../static/jinggao.png'
							})
						}
					},
					fail: (err) => {
						console.log(err)
					}
				});

			},
			gomycode() {
				uni.navigateTo({
					url: "../mycode/mycode"
				})
			},
			loveclick() {
				this.loveclick = !this.loveclick
			},
			// 朋友个人信息
			friendinfo(msg) {
				console.log(msg)
				uni.navigateTo({
					url: "../friendinfo/friendinfo?uid=" + msg.account
				})
			}
		},
		onPullDownRefresh: function() {
			
			this.token = uni.getStorageSync("token")
			uni.request({
				url: this.G_base + '/api/userinfo',
				method: "GET",
				header: {
					'content-type': 'application/x-www-form-urlencoded',
					'Authori-zation': 'Bearer ' + this.token
				},
				success: (res) => {
					console.log(res)
					console.log(res.data.url);
					this.userinfo.img = res.data.data.avatar
					this.userinfo.nickname = res.data.data.nickname
					this.userinfo.phone = res.data.data.phone
			
				},
				fail: (err) => {
					console.log(err)
				}
			});
			this.getdz()
			uni.stopPullDownRefresh();
		},
	}
</script>

<style scoped>
	.videos {
		z-index: -10;
	}

	.twodisplay .test {
		margin-left: 10px;
	}

	.twodisplay {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}

	.list uni-view {
		margin-top: 10px;
		margin-bottom: 15px;
	}

	.list {
		margin-top: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: #FFFFFF;
		color: rgba(255, 255, 255, 1);
		font-size: 14px;
		font-family: PingFangSC-regular;

	}

	.imgwrapone {
		z-index: -1;
	}

	.twoflex {
		margin-right: 10px;
	}

	.twoflex text:nth-child(1) {
		margin-right: 20px;
	}

	.bottominfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
	}

	.imgwrap image {
		margin-top: 10px;
		margin-right: 5px;
	}

	.imgwrap {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.imgwrapone image {
		margin-top: 10px;
		margin-right: 5px;
	}

	.wrap image {
		width: 30px;
		height: 30px;
		border-radius: 50px;
	}

	.wrap text {
		position: relative;
		margin-left: 13px;
		color: rgba(16, 16, 16, 1);
		font-size: 16px;
		font-family: PingFangSC-regular;
	}

	.wrap {
		display: flex;
		margin: 5px;
	}

	.zjl_tishi view {
		padding: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.zjl_tishi view image {
		margin-right: 5px;
	}

	.zjl_tishi view text {
		border-bottom: 1px solid #DFDFDF;
	}

	uni-icon {
		margin: 0;
	}

	.zjl_tishi {
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 10px 5px;
		width: 120px;
		border: 1px solid black;
		height: auto;
		border-radius: 5px;
		position: absolute;
		right: 10px;
		background-color: #000000;
		color: #FFFFFF;
		z-index: 9999;
		justify-content: flex-start;
	}

	.quan {
		display: flex;
		justify-content: flex-start;
		margin-bottom: 10px;
	}

	.bottominfo {
		margin-left: 40px;
	}

	.top {
		width: 100%;
		height: 200px;
		background-image: url(../../static/1.jpg);
		z-index: -1;
		padding-top: 10px;
	}

	.thispinglun {
		width: 50px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20px;
	}

	/* 弹出评论 */
	.mask {
		width: 100%;
		height: 700upx;
		padding: 20upx;
		box-sizing: border-box;
		background-color: #FAFAFA;
		position: fixed;
		bottom: 0;
		border-top-left-radius: 30upx;
		border-top-right-radius: 30upx;
		/* transition: 2s linear 1s all; */
	}

	.title {
		width: 100%;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		margin-bottom: 10upx;
		position: relative;
	}

	.title image {
		width: 30px;
		height: 30px;
		position: absolute;
		right: 0;
	}

	.thisOne {
		display: flex;
		align-items: center;
		font-size: 14px;
	}

	.useravatar {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		margin-right: 20upx;
	}

	.useravatar2 {
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		margin-right: 20upx;
	}

	.username {
		font-size: 16px;
		color: #8a8a8a;
	}

	.pinglun {
		font-size: 15px;
	}

	.zan {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.zan image {
		width: 35upx;
		height: 35upx;
	}

	.zan view {
		font-size: 15px;
	}

	.pinglunbox {
		width: 87%;
		margin: 10upx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>
